<template>
  <!-- 编辑积分价格 -->
  <div class="goodPriceEdit">
    <span class="goodPriceEdit__text" v-if="!inputVisible" @click="showInput">
      {{ goodPrice }}
      <i class="el-icon-edit"></i>
    </span>
    <el-input-number
      :controls="false"
      ref="savePriceInput"
      v-if="inputVisible"
      v-model="editPrice"
      @blur="hindInpt"
      style="width: 120px"
      placeholder="请输入积分价格"
      :min="1"
      :step="1"
      step-strictly
    ></el-input-number>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class IntegralCode extends Vue {
  name: "IntegralCode";

  /** 积分价格 */
  @Prop({ type: Number })
  readonly goodPrice: number;

  /** 编辑的字段 */
  editPrice = 0;

  /** 显示输入框 */
  inputVisible = false;

  /**
   * 显示输入框
   */
  showInput() {
    this.inputVisible = true;
    this.editPrice = this.goodPrice;
    this.$nextTick(() => {
      const savePriceInput = this.$refs.savePriceInput as HTMLFormElement;
      savePriceInput.$refs.input.focus();
    });
  }

  /**
   * 隐藏输入框
   */
  hindInpt() {
    this.inputVisible = false;
    const editPrice = this.editPrice;
    if (this.goodPrice === editPrice) {
      return;
    }
    if (editPrice > 0) {
      this.$emit("change", editPrice);
    } else {
      this.$message.warning("请正确填写积分价格");
    }
  }
}
</script>

<style lang="scss" scoped>
.goodPriceEdit {
  &__text {
    width: 150px;
    cursor: pointer;
    text-align: center;
  }
  i {
    margin-left: 4px;
    display: none;
  }
  &:hover {
    i {
      display: inline-block;
    }
  }
}
</style>
